<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="意见分类管理" name="first">
        <el-row>
          <el-button class="NewlyBtn" size="small" type="primary" @click="dialog_newly = true"
            icon="el-icon-folder-add">新增</el-button>
        </el-row>
        <!-- 表格 -->
        <el-table size="medium" :data="tableData" tooltip-effect="dark" style="width: 60%" border>
          <el-table-column prop="name" label="意见分类" align="center" width="300"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" plain @click="deletedType({ id: scope.row.id })">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="意见建议回复人管理" name="second">
        <el-row>
          <el-button class="NewlyBtn" size="small" type="primary" @click="addRoleType"
            icon="el-icon-folder-add">新增</el-button>
        </el-row>
        <!-- 表格 -->
        <el-table size="medium" :data="tableDataRole" tooltip-effect="dark" style="width: 80%" border>
          <el-table-column prop="roleName" label="角色" align="center" width="300"></el-table-column>
          <el-table-column prop="optionName" label="意见分类" align="center" width="300"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" plain @click="deletedRole({ id: scope.row.id })">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>


    <!-- 添加意见分类弹窗 -->
    <el-dialog title="添加" :visible.sync="dialog_newly">
      <el-form :label-position="labelPosition" label-width="100px" style="margin-left:20%;">
        <el-form-item label="意见分类 :">
          <el-input v-model="adviceType" style="width:60%" placeholder="请输入意见分类" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog_newly = false">取 消</el-button>
        <el-button type="primary" @click="addType">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加报修类型弹窗 -->

    <!-- 添加回复人弹窗 -->
    <el-dialog title="添加" :visible.sync="dialog_newly_role">
      <el-form :label-position="labelPosition" label-width="100px" style="margin-left:20%;">
        <el-form-item label="角色 :">
          <el-select v-model="form.roleName" placeholder="请选择角色" style="width:300px;" clearable>
            <el-option v-for="item in Role" :key="item.id" :label="item.roleName" :value="item.roleName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="意见分类" style="font-weight:bold;">
          <el-select placeholder="请选择意见分类" v-model="form.optionName" clearable style="width:300px;">
            <el-option v-for="item in tableData" :key="item.id" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog_newly_role = false">取 消</el-button>
        <el-button type="primary" @click="addManagement">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加回复人弹窗 -->

  </div>
</template>

<script>
import { getType, addType, deletedType, getManagement, addManagement, deleteManagement } from '_api/Advice/index.js'
import { getRoles } from '_api/RoleManage/index.js'

export default {
  data() {
    return {
      activeName: 'first',
      labelPosition: "left",
      dialog_newly: false,
      dialog_newly_role: false,
      tableData: [],
      adviceType: "",
      tableDataRole: [],
      Role: [],
      form: {
        roleName: "",
        optionName: ""
      }
    }
  },
  methods: {
    // 删除回复人
    deletedRole(e) {
      this.$confirm('此操作将删除该回复人, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteManagement(e).then(res => {
          if (res.status == 200) {
            this.$message({
              message: '删除成功!',
              duration: 1000,
              type: 'success',
              onClose: () => {
                this.getType()
              }
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 删除故障类型
    deletedType(e) {
      this.$confirm('此操作将删除该意见分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletedType(e).then(res => {
          if (res.status == 200) {
            this.$message({
              message: '删除成功!',
              duration: 1000,
              type: 'success',
              onClose: () => {
                this.getType()
              }
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    //添加意见分类
    addType() {
      addType({ name: this.adviceType }).then(res => {
        if (res.status == 200) {
          this.dialog_newly = false
          this.$message({
            message: '添加成功!',
            duration: 1000,
            type: 'success',
            onClose: () => {
              this.getType()
            }
          })
        }
      })
    },
    //查询意见分类
    getType() {
      getType().then(res => {
        if (res.data.success == true) {
          this.tableData = res.data.data
          this.getManagement()
        }
      })
    },
    addRoleType() {
      this.dialog_newly_role = true
      // 获取角色
      getRoles().then(res => {
        if (res.status == 200) {
          this.Role = res.data.data
        }
      })

    },
    //添加回复人
    addManagement() {
      addManagement(this.form).then(res => {
        if (res.status == 200) {
          this.dialog_newly_role = false
          this.$message({
            message: '添加成功!',
            duration: 1000,
            type: 'success',
            onClose: () => {
              this.getManagement()
            }
          })
        }
      })
    },
    //查询回复人
    getManagement() {
      getManagement().then(res => {
        if (res.data.success == true) {
          this.tableDataRole = res.data.data
        }
      })
    },
  },
  created() {
    this.getType()
  },
};
</script>
<style lang="scss" scoped>
.NewlyBtn {
  margin-bottom: 20px;
}
</style>
